<template>
  <div class="sider-menu">
    <div class="img-name">
      <a-space size="large" direction="vertical">
        <a-space size="large" class="img">
          <a-avatar :size="128"> dfa</a-avatar>
        </a-space>
        <div class="name">Ant Design Vue</div>
      </a-space>
    </div>
    <div class="menu">
      <a-menu
        mode="vertical"
        :selected-keys="selectedKeys"
        :default-selected-keys="['1']"
        @menu-item-click="doMenuClick"
        class="menu"
      >
        <a-menu-item
          class="a-menu"
          v-for="item in visibleRoutes"
          :key="item.path"
        >
          {{ item.name }}
        </a-menu-item>
      </a-menu>
    </div>
  </div>
</template>

<style scoped>
.img-name {
  height: 240px;
  background-color: #a28b8b;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.img {
  margin-top: 30px;
}

.a-menu {
  display: flex;
  align-items: center;
  height: 80px;
  justify-content: center;
  font-size: 20px;
}
</style>

<script setup lang="ts">
import { routes } from "@/router/route";
import { useRouter } from "vue-router";
import { computed, ref } from "vue";
//默认主页
const router = useRouter();

const visibleRoutes = computed(() => {
  return routes.filter((item, index) => {
    if (item.meta?.hideInMenu) {
      return false;
    }
    return true;
  });
});
// 默认主页
const selectedKeys = ref(["/"]);
// 路由切换后，更新选中项
router.afterEach((to, from, failure) => {
  selectedKeys.value = [to.path];
});

const doMenuClick = (key: any) => {
  router.push({
    path: key,
  });
};
</script>
